<template>

    <div id="breadcrumb" class="breadcrumb">
      <Row>
        <i-col :xs="{ span: 1}"  :lg="{ span: 1}" style="padding-left: 10px; font-size: 16px">
          <Icon type="navicon" ></Icon>
        </i-col>
        <i-col  :xs="{ span: 23}"  :lg="{ span: 23}" >
          <Breadcrumb>
            <Breadcrumb-item href="/">首页</Breadcrumb-item>
            <Breadcrumb-item v-bind:href="moduleLink">{{moduleName}}</Breadcrumb-item>
            <Breadcrumb-item v-bind:href="featureLink">{{featureName}}</Breadcrumb-item>
            <Breadcrumb-item >{{activityName}}</Breadcrumb-item>
          </Breadcrumb>
        </i-col>
      </Row>
    </div>
</template>

<script>
  export default {
    props: ['moduleName', 'featureName', 'activityName', 'moduleLink', 'featureLink', 'activityLink'],
    name: 'bread-crumb',
    data: function () {
      return {}
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .breadcrumb {
    border-top: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-left: 8px solid #ff5a5f;
    border-right: 0;
    box-sizing: border-box;
    height: 55px;
    min-height: 55px;
    line-height:55px;
    width: 100%;
    flex: 1 1 0;
    background: rgb(255, 255, 255);
    margin-bottom: 10px;
    #box-shadow: 0px 3px 3px #c4c4c4;
  }


</style>
